<template>
    <el-table
        ref="Table"
        :id="Id"
        :data="tableData"
        class="Avie_table_normal"
        :show-header="ShowHeader"
        :height="Height"
        @row-click="RowClick"
        @select="Select"
        @select-all="SelectAll"
        @selection-change="SelectChange"
        @sort-change="sortChange"
        :header-cell-style="HeaderStyle"
        style="width: 100%;"
    >
        <el-table-column
            v-if="SelectionSwitch"
            :selectable="selectableMethod"
            type="selection"
            width="50px"
            align="center"
        ></el-table-column>
        <el-table-column v-if="IndexSwitch" type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column
            v-for="(el,index) in tableHead"
            :key="index"
            :width="el.width"
            :label="el.label"
            :prop="el.prop"
            :fixed="el.fixed"
            :sortable="el.sortable"
            :align="el.align || 'left'"
            :render-header="renderHeader"
            show-overflow-tooltip
        >
            <template slot-scope="scope">
                <Sheet
                    v-if="!el.slotName"
                    :data="scope.row"
                    :Index="scope.$index"
                    :info="el"
                    :formatter="el.formatter"
                    @ControlHandler="ControlHandler"
                />
                <slot :name="el.slotName" v-bind="scope" v-if="el.slotName"></slot>
            </template>
        </el-table-column>
        <slot></slot>
    </el-table>
</template>
<script>
import Sheet from "./sheet";
export default {
    components: { Sheet },
    props: {
        HeaderStyle: {
            type: [Function,Object],
            default: () => () => true
        },
        tableData: {
            type: Array,
            default: () => []
        },
        tableHead: {
            type: Array,
            default: () => []
        },
        SelectionSwitch: {
            type: Boolean,
            default: false
        },
        ShowHeader: {
            type: Boolean,
            default: true
        },
        Height: {
            type: String,
            default: "100%"
        },
        allSelection: {
            type: Boolean,
            default: false
        },
        ClassificationIndex: {
            type: Number,
            default: 0
        },
        IndexSwitch: {
            type: Boolean,
            default: false
        },
        selectableMethod: {
            type: Function,
            default: () => () => true
        },
        showOption: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            Id: "",
            selection: [],
            compare: {}
        };
    },
    created() {
        this.Id = "Table_" + parseInt(Math.random() * 1000000);
    },
    watch: {
        tableData: {
            deep: true,
            handler: function() {
                // this.ReloadTable();
            }
        },
        tableHead: {
            deep: true,
            handler: function() {
                this.ReloadTable();
            }
        },
        SelectionSwitch: function(v, oldv) {
            this.ReloadTable();
        },
        allSelection: function(v) {
            if (v) {
                this.$refs.Table.toggleAllSelection();
            }
        }
    },
    methods: {
        ControlHandler(type, data) {
            this.$emit("ControlHandler", type, data);
        },
        ReloadTable() {
            this.$emit("tableReloadHandler");
        },

        RowClick(row, column, event) {
            this.$emit("RowClick", row, column, event);
        },
        SelectAll(selection) {
            let select = selection.length > 0 ? true : false;
            this.$emit("SelectAllHandler", selection, select);
        },
        SelectChange(selection) {
            console.log("SelectChange");
            let compare = this.CompareSelection(this.selection, selection);
            this.selection = selection;
            this.$emit(
                "SelectChange",
                selection,
                this.ClassificationIndex,
                compare
            );
            this.$nextTick(() => {
                this.SelectClassChange();
            });
        },
        CompareSelection(oldv, V) {
            let value = {
                del: [],
                add: []
            };
            value.del = oldv.reduce((del, el) => {
                let target = V.find(
                    ele =>
                        ele[this.SelectionCompareKey] ==
                        el[this.SelectionCompareKey]
                );
                if (target == undefined) del.push(el);
                return del;
            }, []);
            value.add = V.reduce((add, el) => {
                let target = oldv.find(
                    ele =>
                        ele[this.SelectionCompareKey] ==
                        el[this.SelectionCompareKey]
                );
                if (target == undefined) add.push(el);
                return add;
            }, []);
            return value;
        },
        Select(selection, row) {
            let compare = {
                del: [],
                add: []
            };
            if (selection.includes(row)) compare.add.push(row);
            else compare.del.push(row);
            this.$emit("SelectAloneChange", selection, row, compare);
            this.$nextTick(() => {
                this.SelectClassChange();
            });
        },
        SelectClassChange() {
            // 选中行样式修改
            let all = document.querySelectorAll(
                `#${this.Id} .el-table__body .el-table__row`
            );
            Array.from(all).map(el => {
                el.className = "el-table__row";
            });
            let active = document.querySelectorAll(
                `#${this.Id} .el-table-column--selection .el-checkbox.is-checked`
            );
            Array.from(active).map(el => {
                let p = el.parentNode.parentNode.parentNode;
                p.className = "el-table__row  active";
            });
        },
        sortChange({ column, prop, order }) {
            //order descending 降序  ascending 升序 null 清除排序
            this.$emit("SortChange", prop, order);
        },
        ClearSort() {
            this.$refs.Table.clearSort();
        },

        ChangeSelection(row, check) {
            // 供外部调用 切换 行选中
            this.$refs.Table.toggleRowSelection(row, check);
        },
        GetSelection() {
            // 供外部调用  获取以选中项
            return this.selection;
        },
        clearSelection() {
            // 清空选择
            this.$refs.Table.clearSelection();
        },
        renderHeader(h, {column, $index}) {
            // <el-tooltip class="item" effect="dark" content={column.label} placement="top-start">
            //         <el-button>{column.label}</el-button>
            //     </el-tooltip>
            let width = column.label.length * 18 // 字符串就有问题，要判断是否字符，后面再来
            let realWidth = column.realWidth || column.width
            if (width > realWidth) {
                return h('el-tooltip',{
                    class:'T_nowrap',
                attrs: {content: column.label,placement:"top-start"}
                },[h('div',{},column.label)])
            } else {
                return h('div',{},column.label)
            }
        }
    }
};
</script>

<style lang="scss">
.hidden {
    display: none;
}
</style>